SVG Scalable Vector Graphics
W3C SVG Working Group
Web Standards
利点
Vector Graphic ベクター画像
色々サポートされてる
Web Standards
XMLBase
何でもかける
Animation アニメーションなど
悪い点
Web Standardsで肥大化してる
800ページもあるみたい
XMLやCSS、JavaScriptも理解必要
機械向けでも人間向けでもない言語仕様
Language Design: Machine or Human? | Eisfunke
↓のSVG記事に
SVG: The Good, the Bad and the Ugly | Eisfunke
良い点悪い点が示されてて良い
ツール
svg/svgo: Node.js tool for optimizing SVG files
SVG Optimizer is a Nodejs-based tool for optimizing SVG vector graphics files.
lishu/vscode-svg2: A vscode svg langauge support extension
vscode VsualStudioCodeのプレビュー
Accessibility アクセシビリティ Web
Webサービスのアクセシビリティについて 考慮すべきポイントを挙げてく
Contextually Marking up accessible images and SVGs | scottohara.me
Accessible SVGs | CSS-Tricks
Creating Accessible SVGs | Deque
axe coreが出していて、実際のscreen readerの例が載っているのでこれが良い
aria-labelledbyとidでやってみたが、idの重複が発生する場合がある。
Slot スロット Vue#6124a924c4b14e00004dd071の問題だった
結論:後で持ってくる
aria-labelledby
desc タグも使うなら必須
Icon アイコン UIは、基本的に、何かで包んでること多いため、包んでる部分で出来るアクションを示すのが良さそう
SVG optimizations SVG最適化
IE11&Responsive レスポンシブ デザイン
How to Scale SVG | CSS-Tricks
これ読もう...
SVG container height issues ie11 - GSAP - GreenSock
height 高さ cssの余白がが無駄に増える問題
「SVGをレスポンシブに対応する」のデモページ2 | cly7796.net
インライン
img タグからsvg タグ
なぜか一部表示されない
Google Chrome以外のブラウザでも見てみる
違いある
直接、ファイルのすべてをコピペしてみる
別のsvgデータを利用してみる
同じような人？
html - svg with mask not seen on chrome - Stack Overflow
https://fffuel.co/sssvg/
直感的で分かりやすい